<!--
 * @Description: 基础表格
 * @Author: luoguomei
-->
<template>
    <div class="table-panel">
        <a-config-provider :locale="zhCN">
            <Table className="basicTable" :data-source="table.data" :scroll="{x:400,y: `calc(${100}% - 105px)` }"
                :customHeaderRow="customRow" :pagination="paginationSelection">
                <a-table-column v-for="item in table.columns" :key="item.dataIndex" :title="item.title"
                    :data-index="item.dataIndex" align='center' />
                <template #bodyCell="{text, record, index, column }">
                    <span :style="{'color': column?record[`${column.key||''}__color`]:''}">{{text}}</span>
                </template>
            </Table>
        </a-config-provider>

    </div>
</template>
<script setup>
    import Table from "@/components/AntdDesign/Table/Table.vue";
    import zhCN from 'ant-design-vue/es/locale/zh_CN';
    import dayjs from 'dayjs';
    import 'dayjs/locale/zh-cn';
    import {
        cloneDeep,
        uniqWith
    } from "lodash"; //数据深拷贝
    dayjs.locale('zh-cn');
    import {
        ref,
        watch,
        reactive
    } from "vue";
    let emits = defineEmits(['change-table', ])
    let table = reactive({
        columns: [],
        data: [],
    })
    let tempData = ref({})
    const props = defineProps({
        value: {
            type: [Object, Array],
        },
        total: {
            type: [Number, String],
        },
        columnData: {
            type: Object,
        },
        styles: {
            type: [Object, Array],
            default: () => new Array(),
        },
        warningList: {
            type: Array,
            default: () => new Array(),
        },
    });

    let stylesForm = ref({});
    const paginationSelection = ref({
        current: 1,
        pageSize: 10,
        // pageSizeOptions: ["10", "20", "50", "100"],
        // showSizeChanger: false,
        total: Number(props.total),
        showTotal: (total) => `共${total}条`,
        onChange: (a, b) => changePage(a, b),
    });
    const customRow = (column, defaultRender) => {
        return {
            style: {
                fontSize: stylesForm.value.headerFontSize,
                backgroundColor: stylesForm.value.headerBackgroundColor,
                color: stylesForm.value.headerFontColor
            }
        }
    }
    watch(() => props.value, (n, o) => {
        table.columns = []
        table.data = []
        if (n) {
            if (n instanceof Array) {
                if (props.columnData && Object.keys(props.columnData).length) {
                    if (props.value.length) {
                        let keys = Object.keys(props.value[0])
                        table.columns = keys.map((o, i) => {
                            return {
                                title: props.columnData[o].label,
                                dataIndex: o,
                            }
                        })
                        table.data = props.value.map(o => {
                            return {
                                ...o,
                                xsadasd: "#fff000"
                            }
                        })
                    } else {
                        table.columns = Object.keys(props.columnData).map((o, i) => {
                            return {
                                title: o,
                                dataIndex: i,
                            }
                        })
                        table.data = []
                    }

                }
                tempData.value = cloneDeep(table)
                console.log(667799, table.data);

                setWarningStyle()

            } else {
                table.columns = n.columns
                table.data = n.data
            }
        }

    }, {
        immediate: true,
        deep: true
    });
    watch(() => props.styles, (val) => {
        stylesForm.value = val
        customRow()
    }, {
        immediate: true,
        deep: true
    });
    watch(() => props.total, (val) => {
        paginationSelection.value.total = Number(val)
    }, {
        immediate: true,
        deep: true
    });
    watch(() => props.warningList, (n, o) => {
        console.log("表格", n, o, table.data);
        if (n) {
            setWarningStyle()
        }
    }, {
        deep: true,
        immediate: false
    })

    function changePage(pageIndex, pageSize) {
        // 分页切换
        paginationSelection.value.current = pageIndex
        paginationSelection.value.pageSize = pageSize
        emits("change-table", {
            pageIndex: pageIndex,
            pageSize: pageSize,
        })
    }

    function ssd(text, record, index, column) {
        // 分页切换
        console.log("表格参数", text, record, );
        console.log("表格参数", index, column);
        console.log("表格参数1", props.warningList);

    }

    function setWarningStyle() {
        // 预警样式处理

        console.log(props.warningList, table.data, table.columns, props.columnData);
        if (props.columnData && props.warningList) {
            table.data = tempData.value.data.map((a, b) => {
                let startTime = 0
                let endTime = 0
                let now = 0
                let node = {}
                props.warningList.map((o, i) => {
                    node[`${o.key}__color`] = "#ffffff"
                    if (o.type == "string") {
                        if (o.textContent.some(j => a[o.key] == j)) {
                            node[`${o.key}__color`] = o.color
                        }

                    } else if (o.type == "date") {
                        if (a[o.key]) {
                            now = new Date(a[o.key]).getTime()
                            startTime = new Date(o.dateRange[0]).getTime()
                            endTime = new Date(o.dateRange[1]).getTime()
                            if (now >= startTime && now <= endTime) {
                                node[`${o.key}__color`] = o.color
                            }
                        }
                        console.log(o.dateRange, a[o.key], startTime, endTime, now);
                    } else if (o.type ==
                        "number") {
                        if (typeof a[o.key] == "number") {
                            if (a[o.key] >= o.min && a[o.key] < o.max) {
                                node[`${o.key}__color`] = o.color
                            }
                        }

                    } else {}
                })
                return {
                    ...a,
                    ...node,
                }
            })

        }



        console.log(table.data);

    }
</script>
<style lang="scss" scoped>
    .table-panel {
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #151a26;
    }
</style>